<template>
  <div id="page">
    <el-container>
      <div class="bg"></div>
      <el-container>
        <el-aside width="200px" class="menupan">
          <el-menu class="menu">
            <el-menu-item index="1">主页</el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-setting"></i>博客
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-header class="head">
          </el-header>
          <el-main>
            <Heads />
            <Blobs />
            <Links />
          </el-main>
        </el-container>
      </el-container>
      <el-footer style="padding: 5vh 10%;" class="pagebottom">
        <div class="right">
          Copyright © 2018 纷羽落殇
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import Heads from '@/components/HomeHead.vue'
import Links from '@/components/Links.vue'
import Blobs from '@/components/BlobHomePage.vue'

export default {
  components: {
    Heads,
    Links,
    Blobs
  }
}
</script>
<style lang="scss">
* {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
    Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
    sans-serif;
}
</style>

<style lang="scss" scoped>
$color-ablue: #8ec5fc !default;
$color-apink: #e0c3fc !default;
$color-sblue: #2bd2ff !default;
$color-spink: #fa8bff !default;
$color-sgreen: #2bff88 !default;
.bg {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: -2;
  @media (max-width: 760px) {
    background: -webkit-linear-gradient(87deg, $color-ablue, $color-apink);
    background: -o-linear-gradient(87deg, $color-ablue, $color-apink);
    background: -moz-linear-gradient(87deg, $color-ablue, $color-apink);
    background: linear-gradient(87deg, $color-ablue, $color-apink);
  }
  @media (min-width: 760px) {
    background: -webkit-linear-gradient(
      225deg,
      $color-sblue,
      $color-spink,
      $color-sgreen
    );
    background: -o-linear-gradient(
      225deg,
      $color-sblue,
      $color-spink,
      $color-sgreen
    );
    background: -moz-linear-gradient(
      225deg,
      $color-sblue,
      $color-spink,
      $color-sgreen
    );
    background: linear-gradient(
      225deg,
      $color-sblue,
      $color-spink,
      $color-sgreen
    );
  }
}
.pagebottom {
  background-color: #333333;
  color: #ffffff;
  .right {
    text-align: right;
  }
}
.menupan {
  display: none;
  background-color: #ffffff;
}

.head {
  position: fixed;
}
</style>

